<template>
  <div>
    <a-modal :visible="true" :footer="null" :width="700" @cancel="cancelEvent" class="orderModal">
      <div class="infoModal">详情编辑</div>
      <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" class="formVideoModel">
        <a-form-model-item ref="projectName" label="项目名称" prop="projectName">
          <a-select v-model="form.projectName" placeholder="请选择项目名称">
              <a-select-option value="平安一期">平安一期</a-select-option>
              <a-select-option value="平安二期">平安二期</a-select-option>
              <a-select-option value="平安三期">平安三期</a-select-option>
            </a-select>
        </a-form-model-item>
        <a-form-model-item label="区县" ref="country" prop="country" >
          <a-select v-model="form.country" placeholder="请选择区县" :disabled="disabled">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="鼓楼">鼓楼</a-select-option>
            <a-select-option value="马尾">马尾</a-select-option>
            <a-select-option value="台江">台江</a-select-option>
            <a-select-option value="晋安">晋安</a-select-option>
            <a-select-option value="仓山">仓山</a-select-option>
            <a-select-option value="长乐">长乐</a-select-option>
            <a-select-option value="福清">福清</a-select-option>
            <a-select-option value="闽侯">闽侯</a-select-option>
            <a-select-option value="罗源">罗源</a-select-option>
            <a-select-option value="闽清">闽清</a-select-option>
            <a-select-option value="连江">连江</a-select-option>
            <a-select-option value="平潭">平潭</a-select-option>
            <a-select-option value="永泰">永泰</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="level" label="维护等级" prop="level">
          <a-select v-model="form.level" placeholder="请选择维护等级">
            <a-select-option value="普通">普通</a-select-option>
            <a-select-option value="A">A</a-select-option>
            <a-select-option value="AA">AA</a-select-option>
            <a-select-option value="AAA">AAA</a-select-option>
          </a-select>

        </a-form-model-item>
        <a-form-model-item ref="number" label="资管编号" prop="number">
          <a-input v-model="form.number" @blur="() => {$refs.number.onFieldBlur();}" />
        </a-form-model-item>

        <a-form-model-item ref="police" label="派出所" prop="police">
          <a-input v-model="form.police" @blur="() => {$refs.police.onFieldBlur();}" />
        </a-form-model-item>

        <a-form-model-item ref="siteName" label="点位名称" prop="siteName">
          <a-input v-model="form.siteName" @blur="() => {$refs.siteName.onFieldBlur();}" />
        </a-form-model-item>

        <a-form-model-item ref="siteNo" label="点位编号" prop="siteNo">
          <a-input v-model="form.siteNo" @blur="() => { $refs.siteNo.onFieldBlur();}" />
        </a-form-model-item>

        <a-form-model-item ref="poleType" label="立杆类型" prop="poleType">
          <a-select v-model="form.poleType" placeholder="请选择立杆类型">
              <a-select-option value="探头">探头</a-select-option>
              <a-select-option value="WIFI">WIFI</a-select-option>
            </a-select>
        </a-form-model-item>

        <a-form-model-item ref="camera" label="探头数量" prop="camera">
          <a-input v-model="form.camera" @blur="() => { $refs.camera.onFieldBlur();} " />
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 10, offset: 10 }">
          <a-button type="primary" @click="onSubmit">
            提交
          </a-button>
          <a-button style="margin-left: 10px;" @click="onCancel">
            取消
          </a-button>
        </a-form-model-item>
      </a-form-model>

    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { modifyMonitorVideo } from '@/api/video'
import { getUserRightAction } from '@/utils/util'
export default {
  props: ['newform', 'clickType'],
  data() {
    return {
      disabled: false,
      lodaing: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      dataSource: [],
      form: {},
      rules: {
        country: [{ required: true, message: '请输入区县', trigger: 'blur' }],
        level: [{ required: true, message: '请输入维护等级', trigger: 'blur' }],
        number: [{ required: true, message: '请输入资管编号', trigger: 'blur' }],
        camera: [{ required: true, message: '请输入探头数量', trigger: 'blur' }],
        poleType: [{ required: true, message: '请输入立杆类型', trigger: 'blur' }],
        police: [{ required: true, message: '请输入派出所', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        siteName: [{ required: true, message: '请输入点位名称', trigger: 'blur' }],
        siteNo: [{ required: true, message: '请输入点位编号', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.form = this.newform
    let country = getUserRightAction()[0]
    country.length == 0 ? (this.disabled = false) : (this.disabled = true)
  },
  mounted() {},
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('updateMsg', this.form)
        } else {
          return false
        }
      })
    },
    phoneCheck(rule, value, callbackFn) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(value)) {
        callbackFn('手机号码格式不正确')
        return
      }
      callbackFn()
    },
    handleChange(e) {
      this.form.roleName = e
    },
    onCancel() {
      this.$emit('cancelEvent')
    },
    handleTableChange() {},
    addMember() {},
    cancelEvent() {
      this.$emit('cancelEvent')
    },
  },
}
</script>

<style lang="less">
.infoModal {
  height: 51px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px 6px 0px 0px;
  text-align: center;
  line-height: 51px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
</style>
